<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap{
            width: 1000px;
            height: 600px;
            border: 1px solid #F1F1F1;
            margin: 50px auto;
        }
        ul{
            list-style-type: none;
        }
        ul li{
            float: left;
            margin-left:20px ;
        }
        li img{
            width: 200px;
            height: 250px;
        }
    </style>

</head>
<body>
<div class="wrap">
    <ul>
        <li><img src="images/left.png" ><br/><input type="button" value="赞(1)"/></li>
        <li><img src="images/right.png" ><br/><input type="button" value="赞(1)"/></li>
        <li><img src="../img/banner/3.png" ><br/><input type="button" value="赞(1)"/></li>
        <li><img src="../img/banner/4.png" ><br/><input type="button" value="赞(1)"/></li>
    </ul>
</div>


<script>
    //封装一个通过标签名获取元素的函数
    function tagName$(name){
        return document.getElementsByTagName(name);
    }
    //通过闭包的方式获取数据，并缓存
    //通过闭包，外层函数与内层函数之间的语句只会执行一次
    function getvalue(){
        var value=2;
        return function(){
            this.value="赞("+(value++)+")";
        }
    }
    //循环遍历获取按钮
    var button=tagName$("input");
    for (var i=0;i<button.length;i++) {
        button[i].onclick=getvalue();
    }
</script>

</body>
</html>